<template>
	<view class="all_store" :class="themeName">
		<view class="store-container">
			<view v-for="(item, index) in lists" :key="index" class="store-item m-b-20">
				<view class="flex row-between">
					<image class="img" :src="item.shop.image" mode=""></image>
					<view class="s-boxs">
						<view class="header-title back md">{{item.title}}</view>
						<view class="sm lighter">所属门店：{{item.shop.name}}</view>
						<view class="sm lighter">门店店长：{{item.shop.contact}}</view>
						<view class="sm lighter">店址：{{item.shop.address}}</view>
					</view>
					<view>
						<view class="s-go sm m-l-20">正常使用</view>
						<!-- <view class="s-go sm m-l-20" v-if="item.status==1">正常使用</view> -->
						<!-- <view class="s-go sm s-go2 m-l-20" v-else>机器故障</view> -->
						<view class="s-go sm s-go3 m-l-20 m-t-20" @click="bind(item.id)">绑定门店</view>
					</view>
				</view>
			</view>
		</view>
		<u-picker
		  v-model="show"
		  :confirm-color="themeColor"
		  cancel-color="#999"
		  mode="selector"
		  :range="chooseList"
		  range-key="name"
		  @confirm="change"
		>
		</u-picker>
	</view>
</template>

<script>
import { jiqiren,myShoplist,fenpei } from '@/api/others.js';
export default {
	name: 'AllStore',
	data() {
		return {
			type: '',
			lists: [
				// {id:'aa',status:1},
				// {id:'bb',status:2}
			],
			
			show:false,
			bindid:'',
			chooseList:[
				// {id:'1',name:'门店一'},
				// {id:'2',name:'门店二'}
			],
			shopid:'',
		};
	},
	async onLoad() {
		await this.getList();
		await this.mdList();
	},
	methods: {
		// 机器人列表
		getList(){
			jiqiren().then(res => {
				this.lists = res;
			});
		},
		// 门店列表
		mdList(){
			myShoplist().then(res => {
				this.chooseList = res;
			});
		},
		// 绑定门店
		bind(id){
			this.bindid = id;
			this.show = true;
		},
		change(e){
			// console.log(e[0]);
			let index = e[0];
			this.shopid = this.chooseList[index].id;
			this.show = false;
			// 用两个id做逻辑处理
			console.log(this.bindid,this.shopid)
			
			fenpei({
				id:this.bindid,
				shop_id:this.shopid
			}).then(res => {
				this.$toast({
					title: '操作成功'
				})
				this.getList();
			});
		},
	},
	
	created() {
	
	}
};
</script>
<style lang="scss">
.search-container {
	display: flex;
	flex-direction: column;
}
.search-input {
	display: flex;
	align-items: center;
	height: 100rpx;
	padding: 0 20rpx;
	background-color: #ffffff;
	position: relative;
	z-index: 2;
}
.store-container {
	position: relative;
	z-index: 1;
	background-color: white;
	
	.store-item {
		padding: 20rpx 30rpx;
		border-radius: 10rpx;

		.img {
			width: 130rpx;
			height: 130rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}
		.s-boxs{
			flex: 1;
			line-height: 36rpx;
			
			.line-2{
				-webkit-line-clamp: 1;
			}
		}
		.s-go{
			white-space: nowrap;
			color: #0980CC;
			font-size: 28rpx;
			padding: 5rpx 15rpx;
			text-align: center;
		}
		.s-go2{
			color: #FF001E 
		}
		.s-go3{
				background-color: #0980CC;
				border-radius: 35rpx;
				color: #fff;
			}
	}
}

</style>